ವೆಬ್‌ಜಿಎಲ್ ಮೆಮೊರಿ ಪೂಲ್ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್: ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಬಫರ್ ಹಂಚಿಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವುದು

ವೆಬ್‌ಜಿಎಲ್, ಯಾವುದೇ ಪ್ಲಗ್-ಇನ್‌ಗಳನ್ನು ಬಳಸದೆ ಹೊಂದಾಣಿಕೆಯಾಗುವ ವೆಬ್ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ಸಂವಾದಾತ್ಮಕ 2D ಮತ್ತು 3D ಗ್ರಾಫಿಕ್ಸ್ ರೆಂಡರಿಂಗ್ ಮಾಡಲು ಬಳಸುವ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ API ಆಗಿದೆ. ಇದು ದೃಷ್ಟಿಗೆ ಅದ್ಭುತವಾದ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯುಳ್ಳ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ನಂಬಲಾಗದ ಶಕ್ತಿಯನ್ನು ನೀಡುತ್ತದೆ. ಆದಾಗ್ಯೂ, ಇದರ ಹಿನ್ನೆಲೆಯಲ್ಲಿ, ಸಮರ್ಥ ಮೆಮೊರಿ ನಿರ್ವಹಣೆ ಅತ್ಯಗತ್ಯ. ಡೆವಲಪರ್‌ಗಳು ಎದುರಿಸುವ ದೊಡ್ಡ ಸವಾಲುಗಳಲ್ಲಿ ಒಂದು ಮೆಮೊರಿ ಪೂಲ್ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್, ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ತೀವ್ರ ಪರಿಣಾಮ ಬೀರಬಹುದು. ಈ ಲೇಖನವು ವೆಬ್‌ಜಿಎಲ್ ಮೆಮೊರಿ ಪೂಲ್‌ಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು, ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಸಮಸ್ಯೆ, ಮತ್ತು ಅದರ ಪರಿಣಾಮಗಳನ್ನು ತಗ್ಗಿಸಲು ಬಫರ್ ಹಂಚಿಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡುವ ಸಾಬೀತಾದ ತಂತ್ರಗಳ ಬಗ್ಗೆ ಆಳವಾಗಿ ಚರ್ಚಿಸುತ್ತದೆ.

ವೆಬ್‌ಜಿಎಲ್ ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು

ವೆಬ್‌ಜಿಎಲ್, ಆಧಾರವಾಗಿರುವ ಗ್ರಾಫಿಕ್ಸ್ ಹಾರ್ಡ್‌ವೇರ್‌ನ ಅನೇಕ ಸಂಕೀರ್ಣತೆಗಳನ್ನು ಮರೆಮಾಡುತ್ತದೆ, ಆದರೆ ಇದು ಮೆಮೊರಿಯನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು ಆಪ್ಟಿಮೈಸೇಶನ್‌ಗೆ ಅತ್ಯಗತ್ಯ. ವೆಬ್‌ಜಿಎಲ್ ಮೆಮೊರಿ ಪೂಲ್ ಅನ್ನು ಅವಲಂಬಿಸಿದೆ, ಇದು ಟೆಕ್ಸ್ಚರ್‌ಗಳು, ವರ್ಟೆಕ್ಸ್ ಬಫರ್‌ಗಳು, ಮತ್ತು ಇಂಡೆಕ್ಸ್ ಬಫರ್‌ಗಳಂತಹ ಸಂಪನ್ಮೂಲಗಳನ್ನು ಸಂಗ್ರಹಿಸಲು ಮೀಸಲಾಗಿರುವ ಮೆಮೊರಿಯ ಒಂದು ಪ್ರದೇಶವಾಗಿದೆ. ನೀವು ಹೊಸ ವೆಬ್‌ಜಿಎಲ್ ಆಬ್ಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಿದಾಗ, API ಈ ಪೂಲ್‌ನಿಂದ ಮೆಮೊರಿಯ ಒಂದು ಭಾಗವನ್ನು ವಿನಂತಿಸುತ್ತದೆ. ಆಬ್ಜೆಕ್ಟ್ ಇನ್ನು ಮುಂದೆ ಅಗತ್ಯವಿಲ್ಲದಿದ್ದಾಗ, ಮೆಮೊರಿಯನ್ನು ಮತ್ತೆ ಪೂಲ್‌ಗೆ ಬಿಡುಗಡೆ ಮಾಡಲಾಗುತ್ತದೆ.

ಸ್ವಯಂಚಾಲಿತ ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಇರುವ ಭಾಷೆಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ವೆಬ್‌ಜಿಎಲ್‌ಗೆ ಸಾಮಾನ್ಯವಾಗಿ ಈ ಸಂಪನ್ಮೂಲಗಳ ಹಸ್ತಚಾಲಿತ ನಿರ್ವಹಣೆ ಅಗತ್ಯವಿರುತ್ತದೆ. ಆಧುನಿಕ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಎಂಜಿನ್‌ಗಳು *do* ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್ ಹೊಂದಿದ್ದರೂ, ಆಧಾರವಾಗಿರುವ ನೇಟಿವ್ ವೆಬ್‌ಜಿಎಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್‌ನೊಂದಿಗಿನ ಸಂವಹನವು ಎಚ್ಚರಿಕೆಯಿಂದ ನಿರ್ವಹಿಸದಿದ್ದರೆ ಕಾರ್ಯಕ್ಷಮತೆಯ ಸಮಸ್ಯೆಗಳಿಗೆ ಮೂಲವಾಗಬಹುದು.

ಬಫರ್‌ಗಳು: ಜಿಯೊಮೆಟ್ರಿಯ ನಿರ್ಮಾಣದ ಘಟಕಗಳು

ಬಫರ್‌ಗಳು ವೆಬ್‌ಜಿಎಲ್‌ಗೆ ಮೂಲಭೂತವಾಗಿವೆ. ಅವು ವರ್ಟೆಕ್ಸ್ ಡೇಟಾ (ಸ್ಥಾನಗಳು, ನಾರ್ಮಲ್‌ಗಳು, ಟೆಕ್ಸ್ಚರ್ ನಿರ್ದೇಶಾಂಕಗಳು) ಮತ್ತು ಇಂಡೆಕ್ಸ್ ಡೇಟಾ (ತ್ರಿಕೋನಗಳನ್ನು ರೂಪಿಸಲು ವರ್ಟೆಕ್ಸ್‌ಗಳನ್ನು ಹೇಗೆ ಸಂಪರ್ಕಿಸಬೇಕು ಎಂದು ನಿರ್ದಿಷ್ಟಪಡಿಸುವುದು) ಸಂಗ್ರಹಿಸುತ್ತವೆ. ಆದ್ದರಿಂದ ಸಮರ್ಥ ಬಫರ್ ನಿರ್ವಹಣೆ ಅತ್ಯಂತ ಮುಖ್ಯವಾಗಿದೆ.

ಎರಡು ಮುಖ್ಯ ರೀತಿಯ ಬಫರ್‌ಗಳಿವೆ:

• ವರ್ಟೆಕ್ಸ್ ಬಫರ್‌ಗಳು: ಸ್ಥಾನ, ಬಣ್ಣ, ಮತ್ತು ಟೆಕ್ಸ್ಚರ್ ನಿರ್ದೇಶಾಂಕಗಳಂತಹ ವರ್ಟೆಕ್ಸ್‌ಗಳಿಗೆ ಸಂಬಂಧಿಸಿದ ಗುಣಲಕ್ಷಣಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತವೆ.
• ಇಂಡೆಕ್ಸ್ ಬಫರ್‌ಗಳು: ತ್ರಿಕೋನಗಳು ಅಥವಾ ಇತರ ಪ್ರಿಮಿಟಿವ್‌ಗಳನ್ನು ಚಿತ್ರಿಸಲು ವರ್ಟೆಕ್ಸ್‌ಗಳನ್ನು ಯಾವ ಕ್ರಮದಲ್ಲಿ ಬಳಸಬೇಕು ಎಂಬುದನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸುವ ಇಂಡೆಕ್ಸ್‌ಗಳನ್ನು ಸಂಗ್ರಹಿಸುತ್ತವೆ.

ಈ ಬಫರ್‌ಗಳನ್ನು ಹೇಗೆ ಹಂಚಲಾಗುತ್ತದೆ ಮತ್ತು ಹಿಂಪಡೆಯಲಾಗುತ್ತದೆ ಎಂಬುದು ವೆಬ್‌ಜಿಎಲ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ಒಟ್ಟಾರೆ ಆರೋಗ್ಯ ಮತ್ತು ಕಾರ್ಯಕ್ಷಮತೆಯ ಮೇಲೆ ನೇರ ಪರಿಣಾಮ ಬೀರುತ್ತದೆ.

ಸಮಸ್ಯೆ: ಮೆಮೊರಿ ಪೂಲ್ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್

ಮೆಮೊರಿ ಪೂಲ್ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಎಂದರೆ ಮೆಮೊರಿ ಪೂಲ್‌ನಲ್ಲಿರುವ ಮುಕ್ತ ಮೆಮೊರಿಯು ಸಣ್ಣ, ಅಸಂಪರ್ಕಿತ ತುಣುಕುಗಳಾಗಿ ಒಡೆಯುವುದು. ಕಾಲಾನಂತರದಲ್ಲಿ ವಿವಿಧ ಗಾತ್ರದ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಹಂಚಿದಾಗ ಮತ್ತು ಹಿಂಪಡೆದಾಗ ಇದು ಸಂಭವಿಸುತ್ತದೆ. ಯಾದೃಚ್ಛಿಕವಾಗಿ ತುಣುಕುಗಳನ್ನು ತೆಗೆದುಹಾಕಿದ ಜಿಗ್ಸಾ ಪಜಲ್ ಅನ್ನು ಕಲ್ಪಿಸಿಕೊಳ್ಳಿ - ಒಟ್ಟು ಸಾಕಷ್ಟು ಸ್ಥಳ ಲಭ್ಯವಿದ್ದರೂ ಹೊಸ, ದೊಡ್ಡ ತುಣುಕುಗಳನ್ನು ಸೇರಿಸುವುದು ಕಷ್ಟವಾಗುತ್ತದೆ.

ವೆಬ್‌ಜಿಎಲ್‌ನಲ್ಲಿ, ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಹಲವಾರು ಸಮಸ್ಯೆಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು:

• ಹಂಚಿಕೆ ವೈಫಲ್ಯಗಳು: ಒಟ್ಟು ಸಾಕಷ್ಟು ಮೆಮೊರಿ ಇದ್ದರೂ, ಸಾಕಷ್ಟು ಗಾತ್ರದ ನಿರಂತರ ಬ್ಲಾಕ್ ಇಲ್ಲದ ಕಾರಣ ದೊಡ್ಡ ಬಫರ್ ಹಂಚಿಕೆ ವಿಫಲವಾಗಬಹುದು.
• ಕಾರ್ಯಕ್ಷಮತೆ ಕುಸಿತ: ವೆಬ್‌ಜಿಎಲ್ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್ ಸೂಕ್ತವಾದ ಬ್ಲಾಕ್ ಅನ್ನು ಹುಡುಕಲು ಮೆಮೊರಿ ಪೂಲ್ ಮೂಲಕ ಹುಡುಕಬೇಕಾಗಬಹುದು, ಇದು ಹಂಚಿಕೆಯ ಸಮಯವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ.
• ಕಾಂಟೆಕ್ಸ್ಟ್ ಲಾಸ್: ತೀವ್ರತರವಾದ ಪ್ರಕರಣಗಳಲ್ಲಿ, ತೀವ್ರವಾದ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ವೆಬ್‌ಜಿಎಲ್ ಕಾಂಟೆಕ್ಸ್ಟ್ ಲಾಸ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು, ಇದರಿಂದ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಅಥವಾ ಫ್ರೀಜ್ ಆಗುತ್ತದೆ. ಕಾಂಟೆಕ್ಸ್ಟ್ ಲಾಸ್ ಒಂದು ವಿನಾಶಕಾರಿ ಘಟನೆಯಾಗಿದ್ದು, ಇದರಲ್ಲಿ ವೆಬ್‌ಜಿಎಲ್ ಸ್ಥಿತಿಯು ಕಳೆದುಹೋಗುತ್ತದೆ ಮತ್ತು ಪೂರ್ಣ ಮರು-ಪ್ರಾರಂಭದ ಅಗತ್ಯವಿರುತ್ತದೆ.

ನಿರಂತರವಾಗಿ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ರಚಿಸುವ ಮತ್ತು ನಾಶಪಡಿಸುವ ಡೈನಾಮಿಕ್ ದೃಶ್ಯಗಳಿರುವ ಸಂಕೀರ್ಣ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಈ ಸಮಸ್ಯೆಗಳು ಉಲ್ಬಣಗೊಳ್ಳುತ್ತವೆ. ಉದಾಹರಣೆಗೆ, ಆಟಗಾರರು ನಿರಂತರವಾಗಿ ದೃಶ್ಯವನ್ನು ಪ್ರವೇಶಿಸುವ ಮತ್ತು ನಿರ್ಗಮಿಸುವ ಆಟವನ್ನು ಪರಿಗಣಿಸಿ, ಅಥವಾ ತನ್ನ ಜಿಯೊಮೆಟ್ರಿಯನ್ನು ಆಗಾಗ್ಗೆ ನವೀಕರಿಸುವ ಸಂವಾದಾತ್ಮಕ ಡೇಟಾ ದೃಶ್ಯೀಕರಣವನ್ನು ಪರಿಗಣಿಸಿ.

ಸಾದೃಶ್ಯ: ಜನದಟ್ಟಣೆಯ ಹೋಟೆಲ್

ವೆಬ್‌ಜಿಎಲ್ ಮೆಮೊರಿ ಪೂಲ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಹೋಟೆಲ್ ಅನ್ನು ಯೋಚಿಸಿ. ಅತಿಥಿಗಳು ಚೆಕ್ ಇನ್ ಮತ್ತು ಚೆಕ್ ಔಟ್ ಮಾಡುತ್ತಾರೆ (ಮೆಮೊರಿಯನ್ನು ಹಂಚುತ್ತಾರೆ ಮತ್ತು ಹಿಂಪಡೆಯುತ್ತಾರೆ). ಹೋಟೆಲ್ ಕೋಣೆಗಳ ಹಂಚಿಕೆಯನ್ನು ಕಳಪೆಯಾಗಿ ನಿರ್ವಹಿಸಿದರೆ, ಅದು ಉದ್ದಕ್ಕೂ ಹರಡಿರುವ ಅನೇಕ ಸಣ್ಣ, ಖಾಲಿ ಕೋಣೆಗಳೊಂದಿಗೆ ಕೊನೆಗೊಳ್ಳಬಹುದು. ಒಟ್ಟು ಸಾಕಷ್ಟು ಖಾಲಿ ಕೋಣೆಗಳಿದ್ದರೂ, ದೊಡ್ಡ ಕುಟುಂಬವೊಂದು (ದೊಡ್ಡ ಬಫರ್ ಹಂಚಿಕೆ) ಒಟ್ಟಿಗೆ ಉಳಿಯಲು ಸಾಕಷ್ಟು ಪಕ್ಕದ ಕೋಣೆಗಳನ್ನು ಹುಡುಕಲು ಸಾಧ್ಯವಾಗದಿರಬಹುದು. ಇದೇ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್.

ಬಫರ್ ಹಂಚಿಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ತಂತ್ರಗಳು

ಅದೃಷ್ಟವಶಾತ್, ವೆಬ್‌ಜಿಎಲ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳಲ್ಲಿ ಮೆಮೊರಿ ಪೂಲ್ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಮತ್ತು ಬಫರ್ ಹಂಚಿಕೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಹಲವಾರು ತಂತ್ರಗಳಿವೆ. ಈ ತಂತ್ರಗಳು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಬಫರ್‌ಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡುವುದು, ಮೆಮೊರಿಯನ್ನು ಸಮರ್ಥವಾಗಿ ಹಂಚುವುದು, ಮತ್ತು ಗಾರ್ಬೇಜ್ ಕಲೆಕ್ಷನ್‌ನ ಪರಿಣಾಮವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸುತ್ತವೆ.

1. ಬಫರ್ ಮರುಬಳಕೆ

ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಅನ್ನು ಎದುರಿಸಲು ಅತ್ಯಂತ ಪರಿಣಾಮಕಾರಿ ಮಾರ್ಗವೆಂದರೆ ಸಾಧ್ಯವಾದಾಗಲೆಲ್ಲಾ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಬಫರ್‌ಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡುವುದು. ನಿರಂತರವಾಗಿ ಬಫರ್‌ಗಳನ್ನು ರಚಿಸುವ ಮತ್ತು ನಾಶಪಡಿಸುವ ಬದಲು, ಅವುಗಳ ವಿಷಯಗಳನ್ನು ಹೊಸ ಡೇಟಾದೊಂದಿಗೆ ನವೀಕರಿಸಲು ಪ್ರಯತ್ನಿಸಿ. ಇದು ಹಂಚಿಕೆಗಳು ಮತ್ತು ಹಿಂಪಡೆಯುವಿಕೆಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ, ಇದರಿಂದ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್‌ನ ಸಾಧ್ಯತೆಗಳು ಕಡಿಮೆಯಾಗುತ್ತವೆ.

ಉದಾಹರಣೆ: ಡೈನಾಮಿಕ್ ಜಿಯೊಮೆಟ್ರಿ ನವೀಕರಣಗಳು

ಆಬ್ಜೆಕ್ಟ್‌ನ ಜಿಯೊಮೆಟ್ರಿ ಸ್ವಲ್ಪ ಬದಲಾದಾಗಲೆಲ್ಲಾ ಹೊಸ ಬಫರ್ ರಚಿಸುವ ಬದಲು, `gl.bufferSubData` ಬಳಸಿ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಬಫರ್‌ನ ಡೇಟಾವನ್ನು ನವೀಕರಿಸಿ. ಈ ಫಂಕ್ಷನ್ ನಿಮಗೆ ಇಡೀ ಬಫರ್ ಅನ್ನು ಮರುಹಂಚಿಕೆ ಮಾಡದೆಯೇ ಬಫರ್‌ನ ವಿಷಯಗಳ ಒಂದು ಭಾಗವನ್ನು ಬದಲಾಯಿಸಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ. ಅನಿಮೇಟೆಡ್ ಮಾದರಿಗಳು ಅಥವಾ ಪಾರ್ಟಿಕಲ್ ಸಿಸ್ಟಮ್‌ಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಪರಿಣಾಮಕಾರಿಯಾಗಿದೆ.

            
// Assume 'vertexBuffer' is an existing WebGL buffer
const newData = new Float32Array(updatedVertexData);

gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferSubData(gl.ARRAY_BUFFER, 0, newData);

            

              
                Copy
              
            
          

ಹೊಸ ಬಫರ್ ರಚಿಸಿ ಹಳೆಯದನ್ನು ಅಳಿಸುವುದಕ್ಕಿಂತ ಈ ವಿಧಾನವು ಹೆಚ್ಚು ಸಮರ್ಥವಾಗಿದೆ.

ಅಂತರರಾಷ್ಟ್ರೀಯ ಪ್ರಸ್ತುತತೆ: ಈ ತಂತ್ರವು ವಿವಿಧ ಸಂಸ್ಕೃತಿಗಳು ಮತ್ತು ಭೌಗೋಳಿಕ ಪ್ರದೇಶಗಳಲ್ಲಿ ಸಾರ್ವತ್ರಿಕವಾಗಿ ಅನ್ವಯಿಸುತ್ತದೆ. ಅಪ್ಲಿಕೇಶನ್‌ನ ಗುರಿ ಪ್ರೇಕ್ಷಕರು ಅಥವಾ ಸ್ಥಳವನ್ನು ಲೆಕ್ಕಿಸದೆ ಸಮರ್ಥ ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯ ತತ್ವಗಳು ಒಂದೇ ಆಗಿರುತ್ತವೆ.

2. ಪೂರ್ವ-ಹಂಚಿಕೆ

ಅಪ್ಲಿಕೇಶನ್ ಅಥವಾ ದೃಶ್ಯದ ಆರಂಭದಲ್ಲಿ ಬಫರ್‌ಗಳನ್ನು ಪೂರ್ವ-ಹಂಚಿಕೆ ಮಾಡಿ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆ ಹೆಚ್ಚು ನಿರ್ಣಾಯಕವಾಗಿರುವ ರನ್‌ಟೈಮ್ ಸಮಯದಲ್ಲಿ ಹಂಚಿಕೆಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ. ಮುಂಗಡವಾಗಿ ಬಫರ್‌ಗಳನ್ನು ಹಂಚುವ ಮೂಲಕ, ನೀವು ಅನಿರೀಕ್ಷಿತ ಹಂಚಿಕೆಯ ಏರಿಕೆಗಳನ್ನು ತಪ್ಪಿಸಬಹುದು, ಇದು ತೊದಲುವಿಕೆ ಅಥವಾ ಫ್ರೇಮ್ ಡ್ರಾಪ್‌ಗಳಿಗೆ ಕಾರಣವಾಗಬಹುದು.

ಉದಾಹರಣೆ: ನಿಗದಿತ ಸಂಖ್ಯೆಯ ಆಬ್ಜೆಕ್ಟ್‌ಗಳಿಗಾಗಿ ಬಫರ್‌ಗಳನ್ನು ಪೂರ್ವ-ಹಂಚಿಕೆ ಮಾಡುವುದು

ನಿಮ್ಮ ದೃಶ್ಯವು ಗರಿಷ್ಠ 100 ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ಹೊಂದಿರುತ್ತದೆ ಎಂದು ನಿಮಗೆ ತಿಳಿದಿದ್ದರೆ, ಎಲ್ಲಾ 100 ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಜಿಯೊಮೆಟ್ರಿಯನ್ನು ಸಂಗ್ರಹಿಸಲು ಸಾಕಷ್ಟು ಬಫರ್‌ಗಳನ್ನು ಪೂರ್ವ-ಹಂಚಿಕೆ ಮಾಡಿ. ಕೆಲವು ಆಬ್ಜೆಕ್ಟ್‌ಗಳು ಆರಂಭದಲ್ಲಿ ಗೋಚರಿಸದಿದ್ದರೂ ಸಹ, ಬಫರ್‌ಗಳು ಸಿದ್ಧವಾಗಿರುವುದರಿಂದ ಅವುಗಳನ್ನು ನಂತರ ಹಂಚುವ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ.

            
const maxObjects = 100;
const vertexBuffers = [];

for (let i = 0; i < maxObjects; i++) {
 const buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(someInitialVertexData), gl.DYNAMIC_DRAW); // DYNAMIC_DRAW is important here!
 vertexBuffers.push(buffer);
}

            

              
                Copy
              
            
          

`gl.DYNAMIC_DRAW` ಬಳಕೆಯ ಸುಳಿವು ನಿರ್ಣಾಯಕವಾಗಿದೆ. ಇದು ವೆಬ್‌ಜಿಎಲ್‌ಗೆ ಬಫರ್‌ನ ವಿಷಯಗಳನ್ನು ಆಗಾಗ್ಗೆ ಮಾರ್ಪಡಿಸಲಾಗುತ್ತದೆ ಎಂದು ಹೇಳುತ್ತದೆ, ಇದರಿಂದ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್ ಅದಕ್ಕೆ ಅನುಗುಣವಾಗಿ ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

3. ಬಫರ್ ಪೂಲಿಂಗ್

ಕಸ್ಟಮ್ ಬಫರ್ ಪೂಲ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಿ. ಇದು ವಿಭಿನ್ನ ಗಾತ್ರಗಳ ಪೂರ್ವ-ಹಂಚಿಕೆಯ ಬಫರ್‌ಗಳ ಪೂಲ್ ಅನ್ನು ರಚಿಸುವುದನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ. ನಿಮಗೆ ಬಫರ್ ಬೇಕಾದಾಗ, ನೀವು ಪೂಲ್‌ನಿಂದ ಒಂದನ್ನು ವಿನಂತಿಸುತ್ತೀರಿ. ನೀವು ಬಫರ್‌ನೊಂದಿಗೆ ಮುಗಿದಾಗ, ಅದನ್ನು ಅಳಿಸುವ ಬದಲು ಪೂಲ್‌ಗೆ ಹಿಂತಿರುಗಿಸುತ್ತೀರಿ. ಇದು ಒಂದೇ ರೀತಿಯ ಗಾತ್ರದ ಬಫರ್‌ಗಳನ್ನು ಮರುಬಳಕೆ ಮಾಡುವ ಮೂಲಕ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಅನ್ನು ತಡೆಯುತ್ತದೆ.

ಉದಾಹರಣೆ: ಸರಳ ಬಫರ್ ಪೂಲ್ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್

            
class BufferPool {
 constructor() {
 this.freeBuffers = {}; // Store free buffers, keyed by size
 }

 acquireBuffer(size) {
 if (this.freeBuffers[size] && this.freeBuffers[size].length > 0) {
 return this.freeBuffers[size].pop();
 } else {
 const buffer = gl.createBuffer();
 gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(size), gl.DYNAMIC_DRAW);
 return buffer;
 }
 }

 releaseBuffer(buffer, size) {
 if (!this.freeBuffers[size]) {
 this.freeBuffers[size] = [];
 }
 this.freeBuffers[size].push(buffer);
 }
}

const bufferPool = new BufferPool();

// Usage:
const buffer = bufferPool.acquireBuffer(1024); // Request a buffer of size 1024
// ... use the buffer ...
bufferPool.releaseBuffer(buffer, 1024); // Return the buffer to the pool

            

              
                Copy
              
            
          

ಇದು ಒಂದು ಸರಳೀಕೃತ ಉದಾಹರಣೆ. ಹೆಚ್ಚು ದೃಢವಾದ ಬಫರ್ ಪೂಲ್ ವಿವಿಧ ರೀತಿಯ ಬಫರ್‌ಗಳನ್ನು (ವರ್ಟೆಕ್ಸ್ ಬಫರ್‌ಗಳು, ಇಂಡೆಕ್ಸ್ ಬಫರ್‌ಗಳು) ನಿರ್ವಹಿಸುವ ತಂತ್ರಗಳನ್ನು ಮತ್ತು ಪೂಲ್‌ನಲ್ಲಿ ಸೂಕ್ತವಾದ ಬಫರ್ ಲಭ್ಯವಿಲ್ಲದ ಸಂದರ್ಭಗಳನ್ನು ನಿಭಾಯಿಸುವ ತಂತ್ರಗಳನ್ನು (ಉದಾಹರಣೆಗೆ, ಹೊಸ ಬಫರ್ ರಚಿಸುವ ಮೂಲಕ ಅಥವಾ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಒಂದನ್ನು ಮರುಗಾತ್ರಗೊಳಿಸುವ ಮೂಲಕ) ಒಳಗೊಂಡಿರಬಹುದು.

4. ಆಗಾಗ್ಗೆ ಹಂಚಿಕೆಗಳನ್ನು ಕಡಿಮೆ ಮಾಡಿ

ಬಿಗಿಯಾದ ಲೂಪ್‌ಗಳಲ್ಲಿ ಅಥವಾ ರೆಂಡರ್ ಲೂಪ್‌ನೊಳಗೆ ಬಫರ್‌ಗಳನ್ನು ಹಂಚುವುದನ್ನು ಮತ್ತು ಹಿಂಪಡೆಯುವುದನ್ನು ತಪ್ಪಿಸಿ. ಈ ಆಗಾಗ್ಗೆ ಹಂಚಿಕೆಗಳು ಶೀಘ್ರವಾಗಿ ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್‌ಗೆ ಕಾರಣವಾಗಬಹುದು. ಹಂಚಿಕೆಗಳನ್ನು ಅಪ್ಲಿಕೇಶನ್‌ನ ಕಡಿಮೆ ನಿರ್ಣಾಯಕ ಭಾಗಗಳಿಗೆ ಮುಂದೂಡಿ ಅಥವಾ ಮೇಲೆ ವಿವರಿಸಿದಂತೆ ಬಫರ್‌ಗಳನ್ನು ಪೂರ್ವ-ಹಂಚಿಕೆ ಮಾಡಿ.

ಉದಾಹರಣೆ: ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ರೆಂಡರ್ ಲೂಪ್‌ನ ಹೊರಗೆ ಸರಿಸುವುದು

ಬಫರ್‌ನ ಗಾತ್ರವನ್ನು ನಿರ್ಧರಿಸಲು ನೀವು ಲೆಕ್ಕಾಚಾರಗಳನ್ನು ಮಾಡಬೇಕಾದರೆ, ಅದನ್ನು ರೆಂಡರ್ ಲೂಪ್‌ನ ಹೊರಗೆ ಮಾಡಿ. ರೆಂಡರ್ ಲೂಪ್ ದೃಶ್ಯವನ್ನು ಸಾಧ್ಯವಾದಷ್ಟು ಸಮರ್ಥವಾಗಿ ರೆಂಡರಿಂಗ್ ಮಾಡುವುದರ ಮೇಲೆ ಕೇಂದ್ರೀಕರಿಸಬೇಕು, ಮೆಮೊರಿಯನ್ನು ಹಂಚುವುದರ ಮೇಲೆ ಅಲ್ಲ.

            
// Bad (inside the render loop):
function render() {
 const bufferSize = calculateBufferSize(); // Expensive calculation
 const buffer = gl.createBuffer();
 // ...
}

// Good (outside the render loop):
let bufferSize;
let buffer;

function initialize() {
 bufferSize = calculateBufferSize();
 buffer = gl.createBuffer();
}

function render() {
 // Use the pre-allocated buffer
 // ...
}

            

              
                Copy
              
            
          

5. ಬ್ಯಾಚಿಂಗ್ ಮತ್ತು ಇನ್‌ಸ್ಟಾನ್ಸಿಂಗ್

ಬ್ಯಾಚಿಂಗ್ ಎಂದರೆ ಅನೇಕ ಆಬ್ಜೆಕ್ಟ್‌ಗಳ ಜಿಯೊಮೆಟ್ರಿಯನ್ನು ಒಂದೇ ಬಫರ್‌ಗೆ ವಿಲೀನಗೊಳಿಸುವ ಮೂಲಕ ಅನೇಕ ಡ್ರಾ ಕಾಲ್‌ಗಳನ್ನು ಒಂದೇ ಡ್ರಾ ಕಾಲ್‌ಗೆ ಸಂಯೋಜಿಸುವುದು. ಇನ್‌ಸ್ಟಾನ್ಸಿಂಗ್ ಒಂದೇ ಡ್ರಾ ಕಾಲ್ ಮತ್ತು ಒಂದೇ ಬಫರ್ ಬಳಸಿ ವಿಭಿನ್ನ ರೂಪಾಂತರಗಳೊಂದಿಗೆ ಒಂದೇ ಆಬ್ಜೆಕ್ಟ್‌ನ ಅನೇಕ ಇನ್‌ಸ್ಟಾನ್ಸ್‌ಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುತ್ತದೆ.

ಎರಡೂ ತಂತ್ರಗಳು ಡ್ರಾ ಕಾಲ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತವೆ, ಆದರೆ ಅವುಗಳು ಬೇಕಾದ ಬಫರ್‌ಗಳ ಸಂಖ್ಯೆಯನ್ನು ಸಹ ಕಡಿಮೆ ಮಾಡುತ್ತವೆ, ಇದು ಫ್ರ್ಯಾಗ್ಮೆಂಟೇಶನ್ ಅನ್ನು ಕಡಿಮೆ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ: ಇನ್‌ಸ್ಟಾನ್ಸಿಂಗ್‌ನೊಂದಿಗೆ ಅನೇಕ ಒಂದೇ ರೀತಿಯ ಆಬ್ಜೆಕ್ಟ್‌ಗಳನ್ನು ರೆಂಡರಿಂಗ್ ಮಾಡುವುದುಪ್ರತಿ ಒಂದೇ ರೀತಿಯ ಆಬ್ಜೆಕ್ಟ್‌ಗೆ ಪ್ರತ್ಯೇಕ ಬಫರ್ ರಚಿಸುವ ಬದಲು, ಆಬ್ಜೆಕ್ಟ್‌ನ ಜಿಯೊಮೆಟ್ರಿಯನ್ನು ಹೊಂದಿರುವ ಒಂದೇ ಬಫರ್ ಅನ್ನು ರಚಿಸಿ ಮತ್ತು ವಿಭಿನ್ನ ಸ್ಥಾನಗಳು, ತಿರುಗುವಿಕೆಗಳು ಮತ್ತು ಅಳತೆಗಳೊಂದಿಗೆ ಆಬ್ಜೆಕ್ಟ್‌ನ ಅನೇಕ ಪ್ರತಿಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಇನ್‌ಸ್ಟಾನ್ಸಿಂಗ್ ಬಳಸಿ.

            
// Vertex buffer for the object's geometry
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
// ...

// Instance buffer for the object's transformations
gl.bindBuffer(gl.ARRAY_BUFFER, instanceBuffer);
// ...

// Enable instancing attributes
gl.vertexAttribPointer(positionAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(positionAttribute);
gl.vertexAttribDivisor(positionAttribute, 0); // Not instanced

gl.vertexAttribPointer(offsetAttribute, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(offsetAttribute);
gl.vertexAttribDivisor(offsetAttribute, 1); // Instanced

gl.drawArraysInstanced(gl.TRIANGLES, 0, vertexCount, instanceCount);

            

              
                Copy
              
            
          

6. ಬಳಕೆಯ ಸುಳಿವನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ

ಬಫರ್ ರಚಿಸುವಾಗ, ನೀವು ವೆಬ್‌ಜಿಎಲ್‌ಗೆ ಬಳಕೆಯ ಸುಳಿವನ್ನು ನೀಡುತ್ತೀರಿ, ಬಫರ್ ಅನ್ನು ಹೇಗೆ ಬಳಸಲಾಗುವುದು ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಬಳಕೆಯ ಸುಳಿವು ವೆಬ್‌ಜಿಎಲ್ ಇಂಪ್ಲಿಮೆಂಟೇಶನ್‌ಗೆ ಮೆಮೊರಿ ನಿರ್ವಹಣೆಯನ್ನು ಆಪ್ಟಿಮೈಜ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಬಳಕೆಯ ಸುಳಿವುಗಳೆಂದರೆ:

• `gl.STATIC_DRAW`:** ಬಫರ್‌ನ ವಿಷಯಗಳನ್ನು ಒಮ್ಮೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಅನೇಕ ಬಾರಿ ಬಳಸಲಾಗುತ್ತದೆ.
• `gl.DYNAMIC_DRAW`:** ಬಫರ್‌ನ ವಿಷಯಗಳನ್ನು ಪದೇ ಪದೇ ಮಾರ್ಪಡಿಸಲಾಗುತ್ತದೆ.
• `gl.STREAM_DRAW`:** ಬಫರ್‌ನ ವಿಷಯಗಳನ್ನು ಒಮ್ಮೆ ನಿರ್ದಿಷ್ಟಪಡಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ಕೆಲವು ಬಾರಿ ಬಳಸಲಾಗುತ್ತದೆ.

            
// Bad:
function updateBuffer(data) {
 const newData = new Float32Array(data);
 gl.bufferSubData(gl.ARRAY_BUFFER, 0, newData);
}

// Good:
const newData = new Float32Array(someMaxSize); // Create the array once

function updateBuffer(data) {
 newData.set(data); // Fill the array with new data
 gl.bufferSubData(gl.ARRAY_BUFFER, 0, newData);
}

            

              
                Copy
              
            
          

            
let bufferCount = 0;
let totalBufferSize = 0;

const originalCreateBuffer = gl.createBuffer;
gl.createBuffer = function() {
 const buffer = originalCreateBuffer.apply(this, arguments);
 bufferCount++;
 // You could try to estimate the buffer size here based on usage
 console.log("Buffer created. Total buffers: " + bufferCount);
 return buffer;
};

const originalDeleteBuffer = gl.deleteBuffer;
gl.deleteBuffer = function(buffer) {
 originalDeleteBuffer.apply(this, arguments);
 bufferCount--;
 console.log("Buffer deleted. Total buffers: " + bufferCount);
};

            

              
                Copy
              
            
          

            
const canvas = document.getElementById("myCanvas");
const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");

canvas.addEventListener("webglcontextlost", function(event) {
 event.preventDefault();
 console.log("WebGL context lost.");
 // Cancel any ongoing rendering
 // ...
}, false);

canvas.addEventListener("webglcontextrestored", function(event) {
 console.log("WebGL context restored.");
 // Re-initialize WebGL and recreate resources
 initializeWebGL();
 loadResources();
 startRendering();
}, false);

            

              
                Copy